在上一篇文章有介紹到 Hook 這個詞：

1. 只能在 Function Component 或自定義 Hook 中使用
2. 必須在最上層呼叫
3. 以 use 開頭命名
   例如：useState、useEffect、useHistory 等等

這篇文主要介紹 React 中蠻常使用的 － useState 用法

什麼是 useState？

是 React 內建的 Hook，用來在 Function Component 中管理 (state) 狀態

什麼時候會需要用到useState?

這邊最主要介紹：管理組件狀態 useState 這個 Hook

• 當資料屬於 functional component 內部且需要狀態改變來追蹤數據變化時，會需要使用 useState ，例如：按下按鈕會切換物件狀態時（像是改變名字、年齡）等等
• useState 會讓 React 記住這個值，並且在狀態改變時重新觸發渲染

useState 用法

state（狀態） destructuring（解構賦值），用來在元件中追蹤資料變化
例如：
[ selectedIndex, setSelectedIndex ] :
selectedIndex 是目前選中的項目索引，setSelectedIndex 是用來改變它的函式

使用方式：

const [state, setState] = useState(initialValue);

• state：目前狀態的值
• setState：更新狀態的函式
• initialValue：狀態的初始值，狀態內可以是任何型別，例如布林值、字串、物件、陣列等等

範例：

Home.js

import { useState } from "react";

const Home = () => {
  const [name, setName] = useState('五條悟');
  const [age, setAge] = useState(28);

  const handleClick = () => {
    setName('夏油傑');
    setAge(27);
  }

  return (
    <div className="home">
      <h2>Homepage</h2>
      <p>{ name } 是 { age } 歲</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}
 
export default Home;

App.js

import './App.css';
import Home from './Home';

function App() {
  return (
    <div className="App">
      <div className="content">
        <Home />
      </div>
    </div>
  );
}

export default App;

瀏覽器執行畫面：